<template>
  <el-row class="tac">
      <!-- handleOpen和handleClose就是菜单开启关闭时触发的动作，目前没用到 -->
      <!-- 加上router才会在点击菜单时跳转对应的url -->
      <!-- isCollapse菜单展开与折叠 -->
      <el-menu
        :collapse="isCollapse"
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
      >
      <!-- menuList就是从router/index.ts中构建的，而menuList是通过router/topic.ts中的配置获取的 -->
      <!-- 这里用template是因为如果用div，折叠菜单时菜单名称不会折叠了 -->
      <template v-for="menuItem in menuList" :key="menuItem.path" :menu="menuItem">
        <el-sub-menu :index="menuItem.path" v-if="menuItem.children && menuItem.children.length > 0">
          <template #title>
            <el-icon><component :is="menuItem.icon"></component></el-icon>
            <span>{{ menuItem.title }}</span>
          </template>
          <div v-for="menuChildrenItem in menuItem.children" :key="menuChildrenItem.path" :menu="menuChildrenItem">
            <el-menu-item :index="menuChildrenItem.path">{{ menuChildrenItem.title }}</el-menu-item>
          </div>
        </el-sub-menu>
      </template>
      </el-menu>
  </el-row>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
// import { menuList } from '../../router/index';
import { useRouteStore } from '~/store/route';
import { isCollapse } from '~/composables/value';

const router = useRouteStore();
// 不加computed会导致F5刷新页面后没有菜单
const menuList = computed(() => router.menus);

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
</script>
<style>
/* 为了让页面底部的备案号不出现滚动条 */
.el-menu-vertical-demo:not(.el-menu--collapse){
  /* width: 200px; */
  /* min-height: 400px; */
  height: 90vh;
}
</style>